import React from 'react'
import styled from 'styled-components'
import { connect } from 'react-redux'
import { updateName } from '../action/action'
import http from '../http/http'

function mapStateToProps(state) {
  return {
    name: state.name
  }
}

function mapDispatchToProps(dispatch) {
  return {
    updateName: name => dispatch(updateName(name))
  }
}

class Avatar extends React.Component {
  state = {
    photo:
      'https://p96.tr4.n0.cdn.getcloudapp.com/items/WnuEYBXY/avatar.jpg?v=4aadcdbdffe209bbd523530a75351afd'
  }

  componentDidMount() {
    http
      .get(
        'https://uifaces.co/api?limit=1&gender[]=female&random',
        {},
        {
          'X-API-KEY': '1cd013a6bfc87f39d20885878037b2'
        }
      )
      .then(res => {
        // console.log('res', res)
        this.setState({
          photo: res[0].photo
        })
        this.props.updateName(res[0].name)
      })
  }

  render() {
    return <Image source={{ uri: this.state.photo }} />
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Avatar)

const Image = styled.Image`
  width: 44px;
  height: 44px;
  border-radius: 22px;
`
